<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			table{
				width: 200px;
				
			}
			
		</style>
	<script type="text/javascript">
		function addRow(){	
			var lastRow = document.getElementById("lastRow");
			//创建新的行节点
			var newRow = document.createElement("tr");
			//创建新的单元格节点
			var col1 = document.createElement("td");
			//动态添加css样式
			col1.style.color = "red";
			col1.style.fontSize = "large"
			//为单元格添加内部文本内容
			col1.innerHTML = "106";
			var col2 = document.createElement("td")
			col2.innerHTML = "蒋涵"
//			var col3 = document.createElement("td")
//			col3.innerHTML = "13988888888"
//			var col4 = document.createElement("td")
//			col4.innerHTML = "12000"
			//把单元格添加到行节点中
			newRow.appendChild(col1); 
			newRow.appendChild(col2);
//			newRow.appendChild(col3)
//			newRow.appendChild(col4)
			lastRow.parentNode.appendChild(newRow);//把新行节点添加到表格末尾
		}
		function copyRow(){
			var hRow = document.getElementById("hRow")
			var copyRow = hRow.cloneNode(true)//复制指定的行及子节点
			hRow.parentNode.appendChild(copyRow)
		}
		function delRow(){
//			var delRow = document.getElementById("1Row");
//			delRow.parentNode.removeChild(delRow);

			// 获取table对象
			var table1 = document.getElementById("employees");
			var lstC = table1.lastElementChild.firstElementChild;
//			console.info(table1);	
//			console.info(lstC);
			table1
			lstC.parentElement.removeChild(lstC);
//			console.info("删除之后");
//			var table2 = document.getElementById("employees");
//			console.info(table2);

}</script>
	</head>
	<body>
		<table id="employees" cellpadding="0px" cellspacing="0px" border="1px" style="border:solid;">
			<thead>
				<tr id="hRow">
					<td>编号</td>
					<td>姓名</td>
				</tr>
			</thead>
			<tbody>
				<tr id="1Row">
					<td>100</td>
					<td>小李</td>
				<tr id="lastRow">
					<td>105</td>
					<td>小周</td>
				</tr>
			</tbody>
		</table>
	<p>
		<input type="button" name="addBtn" value="添加新行" onclick="addRow()" />
		<input type="button" name="copyBtn" value="复制表头行" onclick="copyRow()" />
		<input type="button" name="delBtn" value="删除数据首行" onclick="delRow()" />
	</p>
	</body>
</html>

